<script  lang="ts" setup name="Person">
  import {ref,defineExpose} from "vue";
  //  创建一个title2，用于储存ref标记的内容
  let title2 = ref()
  let a = ref(1)
  let b = ref(2)
  let c = ref(3)
  function showLog (){
    console.log(title2.value)
  }

  defineExpose({a,b,c})
</script>

<template>
  <div class="prisonBox">
    <h1>中国</h1>
    <h2 ref="title2">河南</h2>
    <h3>周口</h3>
    <button @click="showLog">点我输出h2这个元素</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0 10px;
      }
    }
</style>